<template>
  <div class="floors-nav" ref="nav" v-show="activeIndex!=-1">
    <li
    v-for="(item, index) in titles"
    :key="index"
    :class="index == activeIndex ? 'active': '' "
    @click="switchFloors(index)">
    {{item}}
    </li>
  </div>
</template>

<script>
import _ from "lodash";
import { toScoll, offset, getPosition } from "@/utils/tools"
export default {

  mounted() {
    this.$nextTick(()=> {
        
      
      // this.sectionList = this.$parent.$refs["section"].children;
      // this.scrollHeight = Array.from(
      // this.sectionList,
      // (item) => item.offsetHeight + offset(item).top
      // );
      // this.handlerAddEvent();
      // console.log(this.sectionList);
      // console.log(this.sectionList[0]);
      // console.log(this.sectionList[1]);
      // console.log(this.sectionList[2]);
      
    })
    
  },
  props: {
    titles: {
      type: Array,
      required: true,
    },
    sections:[]

  },
  data() {
    return {
      activeIndex: -1,
      sectionList: [],
      scrollHeight: []
    }
  },
  watch:{
    'sections':{
      handler(newVal,OldVal){
        console.log(newVal);
        
        this.scrollHeight = Array.from( newVal,(item) => {
          console.log(item);
                  
          return item.offsetHeight + offset(item).top
        } );      
        console.log(this.scrollHeight);
        this.handlerAddEvent();
        
      },
      deep:true
    }
  },
  methods: {
    switchFloors(index) {
      this.activeIndex = index;
      toScoll(this.sections, index);
    },
    handlerAddEvent() {
      
      //滚动条事件
      window.addEventListener("scroll", _.debounce(()=> {
        let current = getPosition().top;
        
        if(current<offset(this.sections[0]).top){
          this.activeIndex = -1;
        }else {
          this.activeIndex = this.scrollHeight.findIndex(
            (item) => current < item
          )
        }
      }, 100));
    }
  }
}

</script>

<style>

</style>